<template>
  <div class="links pad-t-26 pad-b-29" v-if="linksDataList && linksDataList.length > 0">
    <h3 class="font-14">友情链接</h3>
    <div class="sites font-color-6 mar-l--17 mar-t-5 mar-b--2 font-12">
      <span v-for="(item, index) in linksDataList" :key="index"
        class="pad-l-17 pad-r-17 pad-t-5 pad-b-5 cursor-p position-r"
        @click="handleJumpPage(item)">{{ item.text }}</span>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    useRouter
  } from 'vue-router'
  import {
    defineComponent,
    ref,
    onMounted,
    watch
  } from 'vue'
  import {
    jumpPage
  } from '@/utils/jumpPageUtils'
  export default defineComponent({
    name: 'FooterLinks',
    props: {
      linksData: Object
    },
    setup(props, context) {
      const router = useRouter()
      // let linksData = inject('footerLinksDataList')
      const linksDataList = ref([])
      onMounted(() => {})
      watch(() => props.linksData, (newVal, oldVal) => {
        linksDataList.value = newVal
      })
      const handleJumpPage = (item) => {
        jumpPage(router, item.hasLink, item.linkTarget, item.linkType, item.linkParams, item.newPage)
      }

      return {
        linksDataList,
        handleJumpPage
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;

  .links {
    width: 923px;
    margin: 0 auto;

    h3 {
      margin: 0;
      padding: 0;
    }

    .sites {
      margin-right: -50px;

      span {
        display: inline-block;
        vertical-align: top;

        &:after {
          content: '';
          display: block;
          height: 11px;
          width: 1px;
          background: #808080;
          position: absolute;
          right: 0;
          top: 50%;
          margin-top: -5px;
        }
      }
    }
  }
</style>
